<template>
  <div class="head-toolbar" v-if="useToolBar">
    <slot name="head-toolbar"></slot>
  </div>
  <el-table v-bind="$attrs" v-on="$attrs" ref="nebulaTable" @row-dblclick="dblClick">
    <template>
      <slot name="default"/>
    </template>
    <template #append>
      <slot name="default"></slot>
    </template>
    <template #empty>
      <slot name="empty"></slot>
    </template>
    <el-table-column v-for="(item,index) in columns" :prop="item.key" :key="index" :label="item.title"
                     v-bind="item">
      <template #default="scope">
        <slot v-if="item.customSlot" :name="item.customSlot" :row="scope.row" :index="scope.$index"/>
      </template>
    </el-table-column>
  </el-table>
  <div class="bottom-pagination" v-if="pagination">
    <el-pagination :size="paginationSize" :background="background" :page-size="pageSize"
                   :default-page-size="defaultPageSize" :total="total" :page-count="pageCount"
                   :pager-count="pagerCount" :current-page="currentPage" :default-current-page="defaultCurrentPage"
                   :layout="layout" :append-size-to="appendSizeTo" :popper-class="popperClass" :prev-text="prevText"
                   :prev-icon="prevIcon" :next-text="nextText" :next-icon="nextIcon" :disabled="disabled"
                   :teleported="teleported" :hide-on-single-page="hideOnSinglePage" @change="changePage"/>
  </div>
</template>
<script setup>

// defineOptions({inheritAttrs: false});
const props = defineProps({
  useToolBar: {type: Boolean, default: false},
  columns: {type: Array, default: () => ([])},
  paginationSize: {type: String, default: "small"},
  background: {type: Boolean, default: true},
  pageSize: {type: Number, default: null},
  defaultPageSize: {type: Number, default: 10},
  total: {type: Number, default: null},
  pageCount: {type: Number, default: null},
  pagerCount: {type: Number, default: 7},
  currentPage: {type: Number, default: null},
  defaultCurrentPage: {type: Number, default: null},
  layout: {type: String, default: "prev, pager, next, jumper, sizes ->, total"},
  pageSizes: {type: Array, default: () => [10, 20, 30, 40, 50, 100]},
  appendSizeTo: {type: String, default: ""},
  popperClass: {type: String, default: ""},
  prevText: {type: String, default: ""},
  prevIcon: {type: String, default: "ArrowLeft"},
  nextText: {type: String, default: ""},
  nextIcon: {type: String, default: "ArrowRight"},
  disabled: {type: Boolean, default: false},
  teleported: {type: Boolean, default: true},
  hideOnSinglePage: {type: Boolean, default: false},
  pagination: {type: Boolean, default: false},
})
const nebulaTable = ref(null)

defineExpose({
  clearSelection: () => nebulaTable.value?.clearSelection(),
  getSelectionRows: () => nebulaTable.value?.getSelectionRows(),
  toggleRowSelection: () => nebulaTable.value?.toggleRowSelection(),
  toggleAllSelection: () => nebulaTable.value?.toggleAllSelection(),
  toggleRowExpansion: () => nebulaTable.value?.toggleRowExpansion(),
  setCurrentRow: () => nebulaTable.value?.setCurrentRow(),
  clearSort: () => nebulaTable.value?.clearSort(),
  clearFilter: () => nebulaTable.value?.clearFilter(),
  doLayout: () => nebulaTable.value?.doLayout(),
  sort: () => nebulaTable.value?.sort(),
  scrollTo: () => nebulaTable.value?.scrollTo(),
  setScrollTop: () => nebulaTable.value?.setScrollTop(),
  setScrollLeft: () => nebulaTable.value?.setScrollLeft(),
  columns: () => nebulaTable.value?.columns(),
  updateKeyChildren: () => nebulaTable.value?.updateKeyChildren()
});

const emits = defineEmits(["change",'db-click'])
const changePage = (currentPage,pageSize) => {
  emits("change", currentPage, pageSize)
}

const dblClick = (row) => {
  emits("db-click",row)
}

</script>
<style>
.head-toolbar {
  background-color: var(--el-color-info-light-9);
  border: 1px solid var(--el-border-color-lighter);
  border-bottom: none;
  padding: 10px;
}

.bottom-pagination {
  border: 1px solid var(--el-border-color-lighter);
  border-top: none;
  padding: 5px 10px;
}
</style>
